<template>
  <div class="p-6px">
    <el-card class="rounded-md" shadow="never" style="min-height: 830px">
      <el-tabs v-model="activeName" type="border-card">
        <el-tab-pane :label="item.name" :name="item.key" v-for="(item, index) in data" :key="index">
          <div v-if="activeName === item.key">
            <component @handle-submit="handleClick" :name="item.name" :config-key="item.key" :is="item.component" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="configPage">
import { ref } from "vue";
import website from "./components/website.vue";
import miniprogram from "./components/wx-mini-program.vue";
import fileupload from "./components/fileupload.vue";
import fenxiao from "./components/fenxiao.vue";
import withdrawal from "./components/withdrawal.vue";
import wechatpay from "./components/wechat-pay.vue";
import { setConfig } from "@/api/system/config";
import { koiMsgError, koiMsgSuccess } from "@/utils/koi";

let data = ref<any>([
  {
    name: "网站管理",
    key: "WEB_SITE_CONFIG",
    component: ref(website)
  },
  {
    name: "上传配置",
    key: "FILE_UPLOAD_CONFIG",
    component: ref(fileupload)
  },
  {
    name: "分销配置",
    key: "FENXIAO_CONFIG",
    component: ref(fenxiao)
  },
  {
    name: "提现配置",
    key: "WITHDRAWAL_CONFIG",
    component: ref(withdrawal)
  },
  {
    name: "微信小程序",
    key: "MINI_PROGRAM_CONFIG",
    component: ref(miniprogram)
  },
  {
    name: "微信支付",
    key: "WECHAT_PAY_CONFIG",
    component: ref(wechatpay)
  }
]);

const activeName = ref(data.value[0].key);

const handleClick = (form: any) => {
  setConfig({
    key: activeName.value,
    value: form
  })
    .then(() => {
      koiMsgSuccess("操作成功");
    })
    .catch(() => {
      koiMsgError("操作异常");
    });
};
</script>

<style lang="scss" scoped></style>
